<html>

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
      content="width=device-width,initial-scale=1.0" />
    <script src="./js/vue.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet"
      href="./styles/element-index.css">
    <link rel="stylesheet" href="./styles/style.css">
    <!-- import JavaScript -->
    <script src="./js/element.js"></script>
    <title>Esco云管理中心</title>
  </head>
  <!-- 欧洲，北美经纬度有问题 -->

  <body>
    <div id="app">
      <!-- floor1 -->
      <div class="floor floor1">
        <el-row :gutter="20" align="bottom">
          <el-col :span="6">
            <div class="grid-content grid-wing-left">
              <!-- <div class="logo"></div> -->
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content  grid-wing-title">
            </div>
          </el-col>
          <el-col :span="6">
            <div class="grid-content grid-wing-right">
              <div class="time-now">
                <div id="showTime"></div>
                <div class="show-tip">仅作演示使用</div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
      <!-- floor3 -->
      <div class="floor floor3">
        <el-row :gutter="10" class="el-row">
          <el-col class="el-col" :span="6">
            <div class="grid-content grid-floor3-left ">
              <div class="grid-content-box0">
                <div class="grid-content-box ">
                  <div class="grid-title"> 设备在线情况 </div>
                  <div id="floor1-charts"
                    style="width: 100%; height: 80%; ">
                  </div>
                </div>
              </div>
              <div class="grid-content-box1">
                <div class="grid-content-box">
                  <div class="grid-title"> 中国区设备分布 </div>
                  <div id="bar-charts1"
                    style="width: 100%; height: 80%; ">
                  </div>
                </div>
              </div>
              <div class="grid-content-box2">
                <div class="grid-content-box">
                  <div class="grid-title"> 工单情况 </div>
                  <div id="floor2-charts"
                    style="width: 100%; height: 80%; ">
                  </div>
                </div>
              </div>
            </div>
          </el-col>
          <!-- 世界地图 -->
          <el-col class="el-col" :span="12">
            <div class="grid-content grid-floor3-center ">
              <div class="grid-content-box0">
                <div class="grid-content-box">
                  <div class="center-line-one">
                    <dl>
                      <dt>实时设备数量</dt>
                      <dd>
                        <scroll-number :old="old"
                          :val="formatNumber(val,2,1)">
                        </scroll-number>
                      </dd>
                    </dl>
                  </div>
                  <div class="center-line-two">
                    <dl v-for="item of deviceTotal"
                      :key="item.id">
                      <dt>{{item.title}}</dt>
                      <dd>{{item.num}}</dd>
                    </dl>
                  </div>
                </div>
                <div class="grid-content-box">
                  <div class="center-right-one">
                    <dl v-for="item of warningNow"
                      :key="item.id">
                      <dt>{{item.title}}：</dt>
                      <dd>{{item.num}} </dd>
                    </dl>
                  </div>
                  <div class="center-right-two">
                    <div class="total-num"
                      v-for="item of warningTotal"
                      :key="item.id">
                      <span> {{item.title}} </span>
                      <dl>
                        <dt><svg-icon
                            :iconname="item.icon"></svg-icon>
                        </dt>
                        <dd>{{item.num}}</dd>
                      </dl>
                    </div>
                  </div>
                </div>
              </div>
              <!-- 地图 -->
              <div class="grid-content-box1">
                <div id="word-charts"
                  style="width: 100%; height: 100%; margin:10px -10px 10px 0;">
                </div>
              </div>
            </div>
          </el-col>
          <!-- 右侧雷达图 -->
          <el-col class="el-col" :span="6">
            <div class="grid-content grid-floor3-right ">
              <div class="grid-content-box0">
                <div class="grid-content-box">
                  <div class="grid-title"> 告警状态信息 </div>
                  <div class="scroll-box">
                    <div class="infoBox" id="infoBox">
                      <ul>
                        <li v-for="item of warningData"
                          :key="item.id">
                          <div class="warning-info">
                            <svg-icon class="icon-img"
                              :iconname="item.icon"></svg-icon>
                            {{item.info}}
                          </div>
                          <div class="item-time">
                            {{item.datetime}} </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
              <div class="grid-content-box1">
                <div class="grid-content-box">
                  <div class="grid-title"> 告警指标分析 <div
                      id="showWeek" class="showWeek">
                      2023年第1周</div>
                  </div>
                  <div id="radar-charts"
                    style="width: 100%; height: 85%; ">
                  </div>
                </div>
              </div>
              <div class="grid-content-box2">
                <div class="grid-content-box">
                  <div class="grid-title"> 告警设备监控 </div>
                  <div id="bar-charts2"
                    style="width: 100%; height:90%; ">
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <script
      src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script> -->
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/world.js"></script>
    <script src="./font/iconfont.js"></script>
    <script src="./js/mock.data1.js"></script>
    <script src="./js/world.js"></script>
    <script src="./js/line.charts.js"></script>
    <script src="./js/bar.charts.js"></script>
    <script src="./js/scrolltext.js"></script>
    <script src="./js/map.data.js"></script>
    <script src="./js/gauge.charts.js"></script>
    <script src="./js/bar.charts2.js"></script>
    <script>



      const App = {
        data() {
          return {
            deviceTotal,
            warningNow,
            warningTotal,
            warningData,
            startVal: 0,
            endVal: 2017,
            old: null, //原始数字， 用来做对比
            val: 287359 //滚动数字
          };
        },
        mounted() {
          // 设备在线情况
          barShow('floor1-charts', 'bar', floor1ChartsData)

          // 远程控制设备成功率
          barShow('floor2-charts', 'bar', data2)



          // 世界地图
          wordMap('word-charts')

          //雷达图
          // radarCharts('radar-charts')

          //柱状玫瑰图
          lineCharts('bar-charts1', leftData)

          //
          barCharts('bar-charts2', rightData)


          // 仪表盘-》柱状图
          barChart2('radar-charts', gaugeData)


          setInterval(() => {
            this.old = this.formatNumber(this.val, 2, 1);
            const random = this.getRandomInt(-5, 10);
            this.val += random; this.deviceTotal[0].num += random * 2
            this.deviceTotal[1].num -= random
          }, 8000)





        },
        methods: { //随机一个整数
          getRandomInt(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
          },
          /**
           * formatNumber()
           * 将数值四舍五入后格式化.
           *
           * @param num 数值(Number或者String)
           * @param cent 要保留的小数位(Number)
           * @param isThousand 是否需要千分位 0:不需要, 1:需要(数值类型);
           * @return 格式的字符串,如'1,234,567.45'
           * @type String
          */
          formatNumber(num, cent, isThousand) {
            num = num.toString().replace(/$|,/g, "");
            if (isNaN(num)) num = "0";
            var sign = num == (num = Math.abs(num));
            num = parseFloat(num.toFixed(cent));
            num = num.toString();
            var cents;
            if (num.lastIndexOf(".") != -1) {
              let index = num.lastIndexOf(".");
              cents = num.substring(index + 1, num.length);
            } else {
              cents = "";
            }
            num = Math.floor(num * Math.pow(10, cent) + 0.50000000001);
            num = Math.floor(num / Math.pow(10, cent)).toString();
            if (isThousand) {
              for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
                num = num.substring(0, num.length - (4 * i + 3)) + "," + num.substring(num.length - (4 * i + 3));
            }
            if (cent > 0) {
              if (cents == "") {
                return (sign ? "" : "-") + num;
              } else {
                return (sign ? "" : "-") + num + "." + cents;
              }
            } else {
              return (sign ? "" : "-") + num;
            }
          },
        },
      };

      const app = Vue.createApp(App);

      const SvgIcon = app.component(
        // 注册的名字
        "svgIcon",
        // 组件的实现
        {
          template: `<svg class="icon" aria-hidden="true">
                       <use :xlink:href="iconname" />
                    </svg>`,
          props: {
            iconname: {
              type: String,
              required: true,
              default: ''
            },
          }
        }
      )

      const ScrollNumber = app.component(
        // 注册的名字
        "ScrollNumber",
        // 组件的实现
        {
          template: `<div class="count-flop" :key="compKey">
            
                    <div :class="[item != '.' && item != ',' ?'count-flop-box':'count-flop-point']" 
                    v-for="(item, index) in value" 
                    :key="index">
                        <div v-if="item == ','" class="count-flop-content">,</div>
                        <div v-else-if="item == '.'" class="count-flop-content">.</div>
                        <div v-else-if="!animationFlag.length || !animationFlag[index]" class="count-flop-content">
                          {{item}}                          
                        </div> 
                        <div v-else-if="animationFlag[index]" class="count-flop-content" :class="['rolling_' + item]">
                            <div v-for="(item2,index2) in numberList" 
                            :key="index2" 
                            class="count-flop-num">                            
                              {{item2}}
                          </div>
                        </div>
                        
                    </div>                  
                </div>`,
          data() {
            return {
              value: [],
              oldValue: [],
              numberList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
              compKey: 0,
              animationFlag: []
            };
          },
          props: ["val", "old"],
          watch: {
            val() {

              this.oldValue = this.old.toString().split("");
              this.value = this.val.toString().split("");
              this.compKey += 1;
              let flagArr = []
              for (let i = this.value.length - 1; i >= 0; i--) {
                if (this.value[i] === this.oldValue[i]) {
                  flagArr.unshift(false)
                } else {
                  flagArr.unshift(true)
                }
              }

              this.animationFlag = flagArr;
            }
          },
          created() {
            this.value = this.val.toString().split("");
          },

        }
      );

      // app.component('countTo', countTo)

      app.use(ElementPlus);
      app.mount("#app");
    </script>
  </body>

</html>